<template>
  <el-header class="content-header">
    <template>
      <div class="seach head-item">
        <el-input
          size="medium"
          v-model="picSearchOptions.ProductCode"
          placeholder="请输入产品Code"
          class="input-with-select"
          style="width: 200px"
        >
        </el-input>
        <el-select
          style="width: 100px; margin-left: 10px"
          size="small"
          v-model="picSearchOptions.Status"
          placeholder="全部类型"
        >
          <el-option
            v-for="k in optionsType"
            :key="k.value"
            :label="k.label"
            :value="k.value"
          ></el-option>
        </el-select>
        <el-date-picker
          style="margin-left: 10px"
          size="small"
          :picker-options="pickerOptions"
          v-model="formDataTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </div>

      <div class="head-item head-right">
        <div class="head-item head-handle-btn" style="display: flex">
          <div class="arrc">
            <button class="cl-button cl-button--primary" @click="empty">
              置空
            </button>
          </div>
          <div class="arrc">
            <button
              class="cl-button cl-button--primary"
              @click="searchEnterFun"
            >
              搜索
            </button>
          </div>
        </div>
      </div>
    </template>
    <panel
      ref="articleContent"
      v-if="messageView"
      :dataDetail="dataDetail"
      @closeAddTemplate="closeAddTemplate"
      @postCreate="postCreate"
      :add="add"
    ></panel>
  </el-header>
</template>
<script>
import * as channelManageApi from "@/api/request/channelManageApi";
import panel from "./panel";
export default {
  props: ["picSearchOptions"],
  components: {
    panel,
  },
  data() {
    return {
      formDataTime: [],
      pickerOptions: {},
      optionsType: [
        {
          value: 0,
          label: "开通中",
        },
        {
          value: 1,
          label: "已开通",
        },
        {
          value: 4,
          label: "已释放",
        },
        {
          value: 5,
          label: "已退款",
        },
        {
          value: 6,
          label: "升级中",
        },
        {
          value: 7,
          label: "已过期",
        },
      ],
      messageView: false,
      add: "",
      dataDetail: {
        id: null,
        channelName: "",
        channelCode: "",
        createTime: "",
        customerName: "",
        customerPhone: "",
        securityKey: "",
        status: 1,
        webSite: "",
        channelLevel: 1,
      },
    };
  },
  methods: {
    async postCreate() {
      await channelManageApi.postCreate(this.dataDetail).catch((i) => {
        if (i.status === 201) {
          this.$notify({
            customClass: "notify-success", //  notify-success ||  notify-error
            message: `新建成功!`,
            showClose: false,
            duration: 1000,
          });
        } else {
          this.$notify({
            customClass: "notify-error", //  notify-success ||  notify-error
            message: `新建失败!`,
            showClose: false,
            duration: 1000,
          });
        }
      });
      this.getList();
    },
    /**
     * 关闭新增
     */
    closeAddTemplate() {
      this.messageView = false;
    },
    // 新增产品
    productEdit() {
      this.add = 1;
      this.messageView = true;
    },
    //刷新页面
    getList() {
      this.$emit("getList");
    },
    // 置空搜索
    empty() {
      this.picSearchOptions.Status = "";
      this.picSearchOptions.ProductCode = "";
      this.picSearchOptions.BusStartTime = "";
      this.picSearchOptions.BusEndTime = "";
      this.formDataTime = [];
      this.getList();
    },

    searchEnterFun() {
      if (this.formDataTime) {
        this.picSearchOptions.BusStartTime = this.formDataTime[0];
        this.picSearchOptions.BusEndTime = this.formDataTime[1];
      }
      this.getList();
    },
  },
};
</script>


<style  lang="scss" scoped>
@import "@/styles/content-manage/manage-head.scss";
.arrc {
  cursor: pointer;
  text-align: center;
  width: 90px;
  font-size: 12px;
  border-radius: 2px;
  margin-right: 20px;
}
.seach {
  margin-left: -4px;
}
.upload-wrap {
  &:hover {
    opacity: 0.8;
  }
}
.head-middle {
  margin-left: 0;
  padding-right: 0;
  margin-right: auto;
}
.handle-batch button {
  padding: 9px 16px;
  margin: 0;
  min-width: 60px;
}
.icon_hover {
  color: rgb(215, 216, 217);
}
.icon_hover:hover {
  color: #999;
}
</style>
